import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {
    id: root

    property int editWidth: 180*dp
    property int textWidth: title === "" ? 0 : 80*dp
    property string title: ""
    property bool required: false
    property bool editable: true

    property bool canCheckAll: false   // 是否有"全部"选项 (还没做)

    // 下拉框Item样式
    property real listItemHeight: 40*dp
    property int  showListMaxCountinPage: 4
    property real popupHeight: listItemHeight * Math.min(showListMaxCountinPage, model.length)

    property var model: ["Content1", "Content2", "Content3"]
    property var checkedState: []


    height: 40*dp
    width: textWidth + editWidth

    // 下拉框选项变更事件
    signal checkChanged()


    function getCheckedList(){
        var list = []
        for(let i = 0; i < model.length; i ++){
            if(checkedState[i]){
                list.push(model[i])
            }
        }
        return list
    }function getText(){
        var res = ""
        for(let i = 0; i < model.length; i ++){
            if(checkedState[i]){
                if(res !== ""){
                    res += ","
                }res += model[i]
            }
        }
        return res
    }
    function setCheckedState(name, state){
        for(let i = 0; i < model.length; i ++){
            if(model[i] === name){
                checkedState[i] = state
            }
        }
        checkedStateChanged()
    }
    function setCheckedList(checkedList){

        initCheckState()
        for(let i = 0; i < checkedList.length; i ++){
            let index = model.indexOf(checkedList[i])
            if(index !== -1){
                checkedState[index] = true
            }
        }
        checkedStateChanged()
    }

    onModelChanged: {
        initCheckState()
    }

    function initCheckState(){      // 全部初始化为false
        checkedState = []
        for(let i = 0; i < model.length; i ++){
            checkedState.push(false)
        }
        root.checkedStateChanged()
    }



    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    ComboBox {
        id: control
        height: parent.height
        width: editWidth
        x: textWidth


        // 下拉框中每一个选项的代理样式
        delegate: ItemDelegate {
        }

        // 显示框文本样式
        contentItem: Text {
            id: textInput
            text: getText()
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
            width: control.width - 40*dp
            elide: Text.ElideRight
            x: 10*dp
            clip: true
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            border.color: "#CCCCCC"
            radius: 3*dp
        }

        // 向下三角箭头
        indicator: Item {
            width: 25*dp;  height: 20*dp
            x: control.width - 30*dp
            y: (control.height-height) / 2
            Image {
                anchors.fill: parent
                source: "qrc:/picture/downarrow.png"
            }
        }

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popupHeight
            y: control.height+2*dp
            padding: 0
            // popup的内容
            contentItem: Rectangle{
                radius: 3*dp
                height: popHeight;  width: control.width
                clip: true
                ListView{
                    anchors.fill: parent
                    model: root.model.length
                    delegate: Rectangle{
                        property bool isHovered: false
                        height: listItemHeight;  width: parent.width
                        color: isHovered ? "#F2F9FF" : "white"
                        Text{
                            text: root.model[index]
                            color: checkedState[index] ? "#1677FF" : "#444444"
                            anchors.verticalCenter: parent.verticalCenter
                            x: 10*dp
                            font.pixelSize: config.fontsize
                        }Image{
                            x: parent.width - 34*dp; y: 3*dp
                            height: 34*dp;  width: 34*dp
                            source: "qrc:/picture/tick.png"
                            visible: checkedState[index]
                        }MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                parent.isHovered = true
                            }onExited: {
                                parent.isHovered = false
                            }
                            onReleased: {
                                checkedState[index] = !checkedState[index]
                                root.checkedStateChanged()
                                root.checkChanged()
                            }
                        }
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }

    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !editable
    }


}
